<template>
  <!-- 详情弹窗 -->
  <a-modal :maskClosable="false" :destroyOnClose="true" title="详情" centered width="70%" v-model="visible">
    <div>
      <div class="box">
        <!-- 变更前内容 -->
        <div class="left">
          <div class="change">基本信息变更前</div>
          <template v-for="(group, index) in typeList">
            <div
              v-if="
                info.beforeInfoData &&
                  info.beforeInfoData.customFormItemMap &&
                  info.beforeInfoData.customFormItemMap[group.id] &&
                  info.beforeInfoData.customFormItemMap[group.id].length
              "
              class="group"
              :key="group.id"
            >
              <div class="_header">
                <span style="font-size: 18px; font-weight: bold">{{ group.name }}</span>
              </div>
              <Form
                :item="info.beforeInfoData.customFormItemMap[group.id]"
                :formName="`form_${index}`"
                :disabled="true"
              >
              </Form>
            </div>
          </template>
        </div>
        <!-- 变更后内容 -->
        <div class="right">
          <div class="change">基本信息变更后</div>
          <template v-for="(group, index) in typeList">
            <div
              v-if="
                info.infoData &&
                  info.infoData.customFormItemMap &&
                  info.infoData.customFormItemMap[group.id] &&
                  info.infoData.customFormItemMap[group.id].length
              "
              class="group"
              :key="group.id"
            >
              <div class="_header">
                <span style="font-size: 18px; font-weight: bold">{{ group.name }}</span>
              </div>
              <Form :item="info.infoData.customFormItemMap[group.id]" :formName="`form_${index}`" :disabled="true">
              </Form>
            </div>
          </template>
        </div>
      </div>
      <div v-if="info.auditStatus !== 0">
        <span style="font-size: 20px; font-weight: bold">审核备注：</span>{{ info.remark }}
      </div>
    </div>

    <template slot="footer">
      <template v-if="type === 2 && info.auditStatus === 0">
        <a-button @click="handleApproval(2)">拒绝</a-button>
        <a-button style="margin-left: 10px" type="primary" @click="handleApproval(1)">通过</a-button>
      </template>
      <template v-else>
        <a-button type="primary" @click="cancel">确 定</a-button>
      </template>
    </template>

    <ApprovalModal ref="approvalModal" @success="approvalSuccess" />
  </a-modal>
</template>

<script>
import { auditsChange } from '@/api/member/member'
import { applyInfo, customModuleTypeList, convertFieldValue } from '@/api/member/member'
import { getDistList } from '@/api/system/system'
import ApprovalModal from './approvalModal.vue'
import Form from '@/components/Form'

export default {
  components: {
    ApprovalModal,
    Form
  },
  data() {
    return {
      visible: false,
      id: '',
      type: 1, //1：详情，2：审核
      info: [],
      typeList: [],
      typeObj: {}
    }
  },
  computed: {
    leadingSex() {
      return 'xxxx'
    }
  },
  created() {},

  methods: {
    async moduleShow(id, type) {
      this.id = id
      this.type = type
      this.typeObj = {}
      await this.getCustomModuleTypeList()
      this.getApplyInfo()

      this.visible = true
    },

    async getApplyInfo() {
      try {
        let res = await applyInfo(this.id)

        this.info = res.data

        this.typeList.forEach(type => {
          if (this.info.beforeInfoData && this.info.beforeInfoData.customFormItemMap) {
            this.info.beforeInfoData.customFormItemMap[type.id] = (
              this.info.beforeInfoData.customFormItemMap[type.id] || []
            ).map((item, index) => {
              let answerItem = (this.info.beforeInfoData.customFormUserAnswerList || []).find(
                f => f.formItemId === item.id
              )

              let text = convertFieldValue(answerItem, item)

              return {
                ...item,
                content: text,
                sort: ++index
                // customFormItemAnswerDtoList: item.customFormItemAnswerList || []
              }
            })
          }

          if (this.info.infoData && this.info.infoData.customFormItemMap) {
            this.info.infoData.customFormItemMap[type.id] = (this.info.infoData.customFormItemMap[type.id] || []).map(
              (item, index) => {
                let answerItem = (this.info.infoData.customFormUserAnswerList || []).find(f => f.formItemId === item.id)
                // let contentArr = (answerItem && answerItem.content) ? JSON.parse(answerItem.content) : []

                let beforeAnswerItem = (this.info.beforeInfoData.customFormUserAnswerList || []).find(
                  f => f.formItemId === item.id
                )

                let text = convertFieldValue(answerItem, item)

                const isEmptyValue = value => {
                  return (
                    value === null ||
                    value === void 0 ||
                    value === '' ||
                    value === '[]' ||
                    (Array.isArray(value) && value.length === 0)
                  )
                }
                let beforeContent =
                    beforeAnswerItem && !isEmptyValue(beforeAnswerItem.content) ? beforeAnswerItem.content : undefined,
                  afterContent = answerItem && !isEmptyValue(answerItem.content) ? answerItem.content : undefined

                // let beforeContent = beforeAnswerItem ?beforeAnswerItem.content || '[""]' : '[""]',
                //   afterContent = answerItem ? answerItem.content || '[""]' : '[""]'

                console.log(item.name, beforeAnswerItem, beforeContent, afterContent)
                return {
                  ...item,
                  content: text,
                  difference: beforeContent != afterContent,
                  sort: ++index
                  // customFormItemAnswerDtoList: item.customFormItemAnswerList || []
                }
              }
            )
          }
        })
      } catch (error) {
        console.error(error)
      }
    },

    //获取区域列表
    async getCustomModuleTypeList() {
      let res = await customModuleTypeList()
      this.typeList = res.data || []
      this.typeList.forEach(item => {
        this.typeObj[item.id] = item
      })
    },

    async getAddressData(value) {
      if (!value) return ''
      let ids = ['0'].concat(value.split(',')),
        addresStr = ''
      for (let i = 0; i < ids.length - 1; i++) {
        let res = await getDistList({ pid: ids[i] })
        let item = res.rows.find(f => f.id === Number(ids[i + 1])) || {}
        addresStr += item.extName
      }
      return addresStr
    },

    handleApproval(status) {
      this.$refs.approvalModal.show(this.id, status)
    },
    approvalSuccess() {
      this.moduleShow(this.id, this.type)
      this.$emit('success')
    },
    cancel() {
      this.visible = false
    },
    noPass() {
      var _this = this
      this.$confirm({
        title: '不通过',
        content: '是否不通过审核',
        onOk() {
          auditsChange({ id: _this.id, status: 2 }).then(res => {
            if (res.code === 0) {
              _this.$message.success(`审核不通过`)
              _this.visible = false
              _this.$emit('upd')
            } else {
              _this.$message.error(res.msg)
            }
          })
        }
      })
    },
    pass() {
      var _this = this
      this.$confirm({
        title: '通过审核',
        content: '是否通过审核',
        onOk() {
          auditsChange({ id: _this.id, status: 1 }).then(res => {
            if (res.code === 0) {
              _this.$message.success(`审核通过`)
              _this.visible = false
              _this.$emit('upd')
            } else {
              _this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.change-img {
  width: 18px;
  height: 18px;
  margin-left: 30px;
}

div {
  margin-bottom: 10px;
}

.box {
  display: flex;

  .change {
    font-size: 20px;
    font-weight: bold;
    color: orange;
    text-align: center;
  }

  .left {
    width: 49%;
  }

  .right {
    border-left: 1px solid #ddd;
    padding-left: 30px;
    flex: 1;
  }

  .content-box {
    .title {
      font-size: 18px;
      font-weight: bold;
      padding-left: 10px;
      border-left: 4px solid orange;
    }

    .contents {
      margin-left: 40px;
    }

    .img1 {
      width: 150px;
      height: 180px;
    }

    .img2 {
      width: 130px;
      height: 110px;
    }

    .img3 {
      width: 300px;
      height: 200px;
    }
  }
}
</style>
